<script setup lang="tsx">
import { COLUMNS } from '../constant'

defineProps({
  data: {
    // 设置cdata的类型
    type: Object,
    // 给cdata设置默认值  ({})  ===  {return {}}
    default: () => ({})
  },
  total: Number,
  pagination: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits([
  'onChange',
  'openUpdate',
  'deleteById',
  'startStatus'
])

const onChange = (pageInfo) => {
  // 调用父组件中的函数
  emit('onChange', pageInfo)
}
const openUpdate = (row) => {
  emit('openUpdate', row)
}
const deleteById = (row) => {
  emit('deleteById', row)
}
const startStatus = (row) => {
  emit('startStatus', row)
}
</script>
<template>
  <div class="baseList">
    <div class="tableBoxs">
      <!-- 
      data:数据
      columns:列
    -->
      <t-table
        row-key="id"
        :data="data"
        :columns="COLUMNS"
        :stripe="false"
        :hover="true"
      >
        <!-- 序号
        serial-number 从1开始数
        rowIndex 从0开始数 
      -->
        <template #rowIndex="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <!-- 护理图片 -->
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img
                      alt="test"
                      :src="row.image"
                      class="tdesign-demo-image-viewer__ui-image--img"
                    />
                    <div
                      class="tdesign-demo-image-viewer__ui-image--hover"
                      @click="open"
                    >
                      <span> <BrowseIcon size="1.4em" /> 预览 </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>
        <!-- 价格添加两个小数 
        toFixed(2) 
      -->
        <template #price="{ row }">
          {{ row.price.toFixed(2) }}
        </template>
        <!-- 操作选项 -->
        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a
              class="btn-dl"
              :class="row.count > 0 ? 'disabled' : ''"
              @click="deleteById(row)"
              >删除</a
            >
            <a
              class="font-bt"
              :class="row.count > 0 ? 'disabled' : ''"
              @click="openUpdate(row)"
              >编辑</a
            >
            <a
              class="delete"
              :class="
                row.count > 0 && row.status === 1
                  ? 'disabled btn-dl'
                  : row.status === 1
                  ? 'btn-dl'
                  : 'font-bt'
              "
              @click="startStatus(row)"
              >{{ row.status === 1 ? '禁用' : '启用' }}</a
            >
          </div>
        </template>
      </t-table>
      <t-pagination
        v-if="total > 10"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="total"
        show-jumper
        @change="onChange"
      />
    </div>
  </div>
</template>
<style scoped></style>
